<template>
	<view style="background-color: #f0f0f0;" class="vwh df-yc">
		<!-- 导航栏 -->
		<view class="navbar w100" :style="{ background: bgcolor }">
			<cu-custom :isBack="true" :showBackIcon="true">
				<block slot="backText">
					<text class="nav-title shopro-selector-rect">黄金茶碗兑换券</text>
				</block>
			</cu-custom>
		</view>
		<!-- 内容 -->
		<view class="content wh100">
			<view class="list df-yc w100 bs px30">
				<view class="coupon mt30">
					<view style="padding-left: 40rpx;padding-right: 75rpx;" class="top white bs wh100 df-xb ai">
						<view class="right df-y">
							<text class="shsc fb fs36">黄金茶碗兑换券</text>
							<text style="opacity: 0.7;margin-top: 45rpx;" class="fs24">请向店员出示此页面</text>
							<text style="opacity: 0.7;" class="fs24">点击下方兑换按钮领取黄金茶碗</text>
						</view>
						<view class="right">
							<image style="width:123rpx;" src="../../../static/imgs/images/jcw.png" mode="widthFix">
							</image>
						</view>
					</view>
					<image style="width: 690rpx;display: flex;" src="../../../static/imgs/images/yhq-red.png"
						mode="widthFix"></image>
					<view class="buttom fs24 bs pa30">
						<view>券码：9999 9999 9999 9999</view>
						<view class="mt30">有效期：<text v-if="couponDetail.usetimestart">{{$tools.timestamp_dot(couponDetail.usetimestart)}}-{{$tools.timestamp_dot(couponDetail.usetimeend)}}</text></view>
						<view class="mt30"  v-if="couponDetail.rule">使用规则：{{couponDetail.rule}}</view>
					</view>
					<image style="width: 690rpx;display: flex;" src="../../../static/imgs/images/yhq-bai.png"
						mode="widthFix"></image>
				</view>
			</view>
		</view>
		<!-- 按钮 -->
		<view @click="jump('/pages/goods/detail/index',{id:couponDetail.goods_ids})" class="button fs28 df-c">兑换黄金茶碗</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				options:{},
				couponDetail:{},
				btnStataus:""
			};
		},
		onLoad() {
			this.options = this.$Route.query;
			this.getCouponDetail();
		},
		methods: {
			jump(path,params){
				this.$Router.push({
					path:path,
					params:params
				})
			},
			// 优惠券详情
			getCouponDetail() {
				let that = this;
				that.$api('coupons.detail', {
					id: that.$Route.query.id,
					user_coupons_id: that.options.userCouponId
				}).then(res => {
					if (res.code === 1) {
						that.couponDetail = res.data;
						if (res.data.status_code) {
							this.btnStataus = res.data.status_code;
						}
					}
				});
			},
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		overflow: hidden;

		.list {
			padding-bottom: 200rpx;
		}
	}

	scroll-view {
		height: 100%;
	}

	.top {
		width: 690rpx;
		height: 287rpx;
		background: linear-gradient(180deg, #993541, #963541);
		border-radius: 20rpx 20rpx 0rpx 0rpx;
	}

	.buttom {
		width: 690rpx;
		background-color: #FFFFFF;
	}

	.button {
		width: 690rpx;
		height: 100rpx;
		background: linear-gradient(270deg, #E8B58E, #F7D9AA);
		box-shadow: 0rpx 3rpx 21rpx 0px rgba(196, 149, 107, 0.4);
		border-radius: 50rpx;
		position: fixed;
		bottom: 100rpx;
		color: #53181E;
	}
</style>
